<template>
  <div id="gameCode">
    <div class="title fz_64 c_00 fz_bold t_c">游戏创建成功</div>
    <div class="gameCode fz_32 c_00 fz_bold">游戏码</div>
    <div class="code t_c">
      <div class="t_c fz_68 c_00">{{accessCode}}</div>
    </div>
    <div class="phone">
      <el-input v-model="input" placeholder="请输入手机号来帮助查找游戏码 " @focus="emptyMessage"></el-input>
      <p class="errMessage">{{errMessage}}</p>
    </div>
    <div class="useCode fz_32 c_19 fz_bold"><span @click.stop="goGameQuery">如何使用游戏码</span></div>
    <div class="backHome t_c" v-show="isOriginHei"><span class="bc_16 fz_36 fz_bold c_ff t_c" @click.stop="backHome">返回首页</span></div>
  </div>
</template>

<script>
  require("./flexible.js");
  import ApiClient from '@/utils/ApiClient';
  export default {
    name: "gameCode",
    data(){
      return {
        input:'',
        isOriginHei: true,
        errMessage:'',
        screenHeight: window.innnerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        originHeight: window.innnerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        id:'',
        accessCode:""
      }
    },
    watch: {
      screenHeight(val){
        if(this.originHeight>val + 100){
          this.isOriginHei = false;
        }else{
          this.isOriginHei = true;
        }
      }
    },
    methods:{
      goGameQuery(){
        this.$router.push({
          name:'gameRules'
        })
      },
      backHome(){
        if(!this.input){
          this.errMessage="请填写手机号";
          return;
        }
        if(!(/^1[34578]\d{9}$/.test(this.input))){
          this.errMessage="手机号格式错误";
          return;
        }
        ApiClient.put(`/app/activity/${this.id}/${this.input}/addMobile.do`).then((res) => {
          console.log(res)
          this.$router.replace({
            name:'gameHome'
          })
        })
      },
      emptyMessage(){
        this.errMessage="";
      }
    },
    mounted(){
      let self = this;
      if(this.$route.query.id){
        this.id=this.$route.query.id;
      }
      if(this.$route.query.accessCode){
        this.accessCode=this.$route.query.accessCode;
      }
      window.onresize = function(){
        return (
          function(){
            self.screenHeight=window.innnerHeight || document.documentElement.clientHeight || document.body.clientHeight
          }
        )()
      }
    }
  }
</script>
<style lang="scss">
  #gameCode{
    .el-input__inner:focus{
      border-color: #169BD5;
    }
  }
</style>
<style scoped lang="scss">
  @import "./base.css";
  div{
    box-sizing: border-box;
  }
  #gameCode {
    padding-top: 0.7rem ;
    padding-bottom: 1.5rem;
    .errMessage{
      color: red;
    }
    .d_none{
      display: none;
    }
    .title{
      width: 100%;
      height: 1.2rem;
    }
    .gameCode{
      width: 100%;
      height: 0.7rem;
      display: flex;
      align-items: flex-end;
      padding-left: 0.45rem;
    }
    .code{
      width: 100%;
      padding: 1rem 0.7rem;
      div{
        width: 100%;
        height: 3.5rem;
        background-color: #D7D7D7;
      }
    }
    .phone{
      padding: 0 0.7rem;
    }
    .useCode{
      font-style: italic;
      padding-top: 0.7rem;
      padding-left: 0.7rem;
      span{
        border-bottom: 1px solid  #169BD5;
      }
    }
    .backHome{
      width: 100%;
      position: fixed;
      bottom: 0.2rem;
      left: 0;
      span {
        height: 1rem;
        width: 90%;
        border-radius:0.1rem
      }
    }
  }
</style>
